<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学号-姓名</title>
    <link rel="stylesheet" href="./style/reset.css" />
    <style>
      .inner {
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
      }
      #header {
        background-color: #191d3a;
        min-width: 1000px;
      }
      #logo {
        float: left;
        margin-right: 40px;
      }
      #nav {
        float: left;
      }
      #join {
        float: right;
      }
      #nav ul {
        display: flex;
        width: 600px;
      }
      #nav ul li {
        flex: auto;
      }
      #nav ul li a {
        display: block;
        color: #cccccc;
        line-height: 58px;
        text-align: center;
      }
      #nav ul li a:hover {
        color: #ffffff;
        background-color: #252947;
      }
      #join a {
        display: block;
        width: 100px;
        height: 32px;
        background-color: #38b774;
        margin-top: 13px;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 32px;
        border-radius: 4px;
      }
      #banner {
        background: url("./images/banner.jpg") center no-repeat;
        height: 485px;
      }
      #content ul {
        display: flex;
        padding: 50px 0;
        border-bottom: 1px solid #dbe1e7;
        text-align: center;
        justify-content: space-between;
      }
      #content ul li img {
        width: 218px;
      }
      #content h3 {
        padding: 10px 0;
      }
      #content p a {
        color: #38b774;
        font-size: 12px;
        padding-right: 12px;
        background: url("./images/sanjiaoxing.png") no-repeat right;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div class="inner">
        <div id="logo"><img src="./images/logo.png" alt="" /></div>
        <div id="nav">
          <ul>
            <li><a href="">首页</a></li>
            <li><a href="">博雅游戏</a></li>
            <li><a href="">博雅新闻</a></li>
            <li><a href="">关于我们</a></li>
            <li><a href="">客服中心</a></li>
            <li><a href="">投资者关系</a></li>
          </ul>
        </div>
        <div id="join">
          <a href="">加入我们</a>
        </div>
      </div>
    </div>
    <!-- end header -->

    <div id="banner"></div>
    <!-- end banner -->

    <div id="content">
      <div class="inner">
        <ul>
          <li>
            <p><img src="./images/pro1.jpg" alt="" /></p>
            <h3>BPT宣传片</h3>
            <p><a href="">点击播放</a></p>
          </li>
          <li>
            <p><img src="./images/pro2.jpg" alt="" /></p>
            <h3>BPT宣传片</h3>
            <p><a href="">点击播放</a></p>
          </li>
          <li>
            <p><img src="./images/pro3.jpg" alt="" /></p>
            <h3>BPT宣传片</h3>
            <p><a href="">点击播放</a></p>
          </li>
          <li>
            <p><img src="./images/pro4.jpg" alt="" /></p>
            <h3>BPT宣传片</h3>
            <p><a href="">点击播放</a></p>
          </li>
        </ul>
      </div>
    </div>
    <!-- end content -->
  </body>
</html>
